import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import {
  TextArea,
  TextField,
 
  Button,
  Col,
  Row,
 
} from '@folio/stripes/components';
 
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import moment from 'moment-timezone';
 
function validate(values, props) {
  const errors = {};
  if (!values || !values.prisonTerm) {
    errors.prisonTerm = (
      <FormattedMessage id="ui-party.errors.missingRequiredField" />
    );
  }
  if (!values || !values.foulDescription) {
    errors.foulDescription = (
      <FormattedMessage id="ui-party.errors.missingRequiredField" />
    );
  }
  return errors;
}

class EditForm extends Component {
  // eslint-disable-next-line react/sort-comp
  constructor(props) {
    super(props);
    this.state = {
      open: true,

      show: false,
      editsStatus: 'success',

    };
  }

  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    // eslint-disable-next-line react/no-unused-prop-types
    initialValues: PropTypes.object,
    // eslint-disable-next-line react/no-unused-prop-types
    dictionary: PropTypes.object,
    // eslint-disable-next-line react/no-unused-prop-types
    cleanSearch: PropTypes.func,
    intl: PropTypes.func,
    cancel: PropTypes.func,

   
    stripes:PropTypes.object,
  };

  render() {
    const footer = (

      <div>
        <Button onClick={this.props.cancel}>
          <FormattedMessage id="ui-party.cancel" />
        </Button>
        <Button buttonStyle="primary" marginBottom0 type="submit">
          <FormattedMessage id="ui-party.saveAndExit" />
        </Button>
      </div>

    );
    const { handleSubmit, intl } = this.props;
  
    return (
      <Row center="xs" style={{ width: '100%' }}>
        <Col xs={6}>
          <form data-test-form-page id="form-add" onSubmit={handleSubmit}>
            <Field
              component={TextField}
              name="barcode"
              label={
                <FormattedMessage id="ui-party.loans.columns.party.blocklist.barcode" />
              }
              readOnly
            />
             <Field
              label={<FormattedMessage id="ui-party.loans.columns.party.blocklist.prisonTerm" />}
              placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.blocklist.prisonTerm' })}
              name="prisonTerm"
              component={DatePerfectChoice}
              dateFormat="YYYY-MM-DD"
              exclude={(day)=>{
              const ISOFormat = 'YYYY-MM-DD HH:mm:ss';
              return day.isBefore(moment().subtract(1, 'day'),ISOFormat);
               }}
              isClear
               required
             />
           <Field
              component={TextArea}
              name="foulDescription"
              label={
                <FormattedMessage id="ui-party.loans.columns.party.blocklist.foulDescription" />
              }
              style={{ height: '150px' }}
              required
            />
            {footer}
          </form>
        </Col>
 
      </Row>
    );
  }
}

export default injectIntl(
  reduxForm({
    form: 'blackListEditForm' + new Date().getTime(),
    validate,
    navigationCheck: true,
    enableReinitialize: true
  })(EditForm)
);
